<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class=" " id="tvideobox">
				<div class="playvideo playvideoid" id="playvideo2">

				</div>
			</div>

			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<div class="layui-tab-content" style="padding: 10px 0;">
					<div class="layui-tab-item layui-show">
						<!-- 评论 -->
						<div class="tabtitle">
							名师交流
						</div>
						<table id="teachertable1" lay-filter="type_hash" lay-even lay-skin="nob"></table>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="videodet">

	<div class="playbox"></div>

	<!-- 		<video width="800" height="" src="d.url">
			
				当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
			</video> -->
		</div>
		<div class=" playtab ">
			<div class="flexcenterlr">
				<h1>{{d.title}}</h1>
				
			
			</div>
		</div>
	
				<div class="playtab">
					<div class="addgz cupo" :class="xsonelist.isFocus ==1 ? 'activecolor' : ''" style="z-index: 88;">
	
					</div>
					<div class="playtitle">
						讲师简介
						<span>The lecturer introduction</span>
					</div>
					<div class="playcont">
						<div class="">
							<div class="playheadimg"  style="background-image: url({{  IMG_URL + d.photo }});"   >
							</div>
							<div class="teachnum">
								<span>
									粉丝 <b> {{d.fansNumber}}</b>
								</span>
								<span> 关注 <b>{{d.focusNumber}}</b></span>
							</div>
						</div>
	
						<div class="playteachone">
							<h2>{{d.tbName}}</h2> <span class="bqs">
							{{#  layui.each(d.lecturerTypes, function(index, item){ }}
							<span class="bq">{{item}}</span>
						{{# }) }}
							</span>
							<h3>{{d.tbIntroduction}}</h3>
	
						</div>
					</div>
				</div>
				<!-- 讲师简介 end -->
				<!-- 课程简介 -->
				<div class="playtab">
					<div class="playtitle ">
						课程简介
						<span>
							Course introduction
						</span>
					</div>
					<div class="playcont">
						<h4 > {{d.introduction}}</h4>
					</div>
				</div>
				
				<div class="playtab" style="padding: 0;">
				<div class="textli bottomhr">
					<b>发布时间</b><span>{{d.createTime}}</span>
				</div>
				<div class="textli">
					<b>课程类型</b>
					{{#  layui.each(d.produstsLabels, function(index1, item1){ }}
						<span class="slashright" >{{item1}}</span>
					{{# }) }}
				
				</div>
				<div class="textli bottomhr">
				
					<b>上架状态</b> 
		<!-- 			<span class="layui-form" ><input lay-filter="videostatusdemo" type="checkbox" name="" lay-skin="switch" lay-text="上架|下架"  {{ d.shelves == 1 ? 'checked' : '' }}></span>
					{{ d.tbStatus == 1 ? 'checked' : '' }} -->
					    <span>
										{{#  if(d.shelves === 1){ }}
										 已上架
										{{#  }else { }} 

										下架
										{{#  } }} 
					</span>
				</div>

				<div class="textli">
					<b>操作</b>
					<span> <a href="#/video/upvideo?tbId={{layui.router().search.tbId}}" class="cupo" id="bjbtn" lay-event="edit">
						编辑
					</a>  / <a class="cupo" id="delbtn" lay-event="del">删除				</a> </span>
				<!-- 	<div class="btn10 btn10active" style="margin-right: 30px;" id="bjbtn" lay-event="edit">
						编辑
						</div>
					<div class="btn10 ">
						删除
					</div> -->
			
				</div>
			<!-- 课程简介 -->
			<!-- 右侧  -->
		</div>
</script>

<!----------------------------------------------- 评论 ----------------------------------------------->

<script type="text/html" id="barteachertable">
	<a class="layui-btn" lay-event="look">查看</a>
	<a class="layui-btn" lay-event="del">删除</a>
</script>

<script type="text/html" id="teachertoolbar">

	<div class="flexcenter " >
		<a href="#/video/msjladd?videotbId={{d.where.tbId}}" class="layui-btn">发布交流</a>
			<div class="layui-inline">
			<input type="text" class="layui-input" id="datpl" placeholder="选择日期">
		</div>


			</div>
		
</script>

<script type="text/html" id="headimgTp">
	<!-- 这里的 checked 的状态只是演示 -->
 <img src="{{ IMG_URL + d.photo }}"  style="height: 100%;"  alt="讲师头像"  >
</script>

<script type="text/html" id="StatusTp1">
	<!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="isTop" value="{{d.isTop}}" lay-skin="switch"  lay-filter="istopDemo" {{ d.isTop == 1 ? 'checked' : '' }}>
</script>



<script>
	var urlall = '';
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form', 'laydate', 'laytpl'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form,
			laytpl = layui.laytpl,
			laydate = layui.laydate;
		var router = layui.router();
		// 获取当前的视频详情
		POSTAJAX(VideoGetById, {
			tbId: router.search.tbId
		}, function(res) {
			urlall = res.data.url;
			// console.log(res.data.url);
			laytpl($("#videodet").html()).render(res.data, function(html) {
				$("#tvideobox").html(html);
				form.render()
				
				$("#delbtn").on('click', function() {
					layer.confirm('确认删除该课程吗?', function(index) {
						POSTAJAX(VideoDel, {
							ids: [router.search.tbId]
						}, function(res) {
							layer.msg(res.msg);
							if (res.status == 200) {
								
								location.href = '#/video/list'
							
							}
						})
				
						//向服务端发送删除指令
					});
				
				})

			});



			var videoObject = {
				container: '.playvideoid', //“#”代表容器的ID，“.”或“”代表容器的class
				variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
				autoplay: true,
				html5m3u8: true,
				video: 'res.data.url'
			};
			var player = new ckplayer(videoObject);

			$("#bjbtn").on('click', function() {
				location.href = "#/video/upvideo?tbId=" + router.search.tbId
			})


		})
		//评论


		var plitemjson = {

			startTime: '',
			stopTime: '',
			tbId: router.search.tbId,
			type: 1
		}


		//基础
		var tablejson = [ //表头
			{
				type: 'checkbox',
				fixed: 'left'
			}, {
				field: 'id',
				title: 'ID',
				hide: true
			}, {
				field: 'photo',
				title: '用户头像',
				templet: '#headimgTp',
				event: 'lookheadimg',
				width: 150
			}, {
				field: 'realName',
				title: '真实姓名',
				width: 120
			}, {
				field: 'tbUserID',
				title: '用户ID',

				width: 150
			}, {
				field: 'tbAnswerContent',
				title: '问答内容',

			}, {
				field: 'createTime',
				title: '创建时间',
				width: 200
			}
		]

		var plkey = '';
		var typetable = table.render({
			size: 'lg',
			id: 'pltableid',
			where: plitemjson,
			contentType: 'application/json',
			pageSize: 10,
			elem: '#teachertable1',
			toolbar: '#teachertoolbar',
			height: 'full-400',
			url: HH_URL + getCustomCommunicationPraiseByParam, //数据接口
			page: true, //开启分页
			even: true,
			skin: 'nob',
			cellMinWidth: 100,
			cols: [
				tablejson
			],
			done: function(res, curr, cont) {
				if (res.data != null) {
					$('#count1').html(cont)
					$('#tablesearchid').keydown(function(event) {
						if (event.keyCode == 13) {
							xykey = $('#tablesearchid').val();
							plitemjson.search = $('#tablesearchid').val()
							table.reload('pltableid', {
								where: plitemjson,
								page: {
									curr: 1 //重新从第 1 页开始
								}
							}, 'data');
							// setTimeout(function(){
							$("#tablesearchid").val(xykey)
							// },100)
						}

					})
					if (plitemjson.startTime != '') {
						//时间搜索框的处理
						$("#datpl").val(plitemjson.startTime + ' - ' + plitemjson.stopTime)
					}

					//时间搜索选择
					laydate.render({
						elem: '#datpl', //指定元素
						range: true,
						done: function(value, date, endDate) {
							if (value == '') {
								plitemjson.startTime = '',
									plitemjson.stopTime = ''

							} else {
								plitemjson.startTime = date.year + '-' + date.month + '-' + date.date,
									plitemjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date
							}
							table.reload('pltableid', {
								where: plitemjson,
								page: {
									curr: 1 //重新从第 1 页开始
								}
							});
						}
					});

				}
			}
		});
		//监听事件
		table.on('toolbar(type_hash)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'delallbtn':
					//批量删除行数
					// console.log(checkStatus.data);
					var tbarray = [];
					$.each(checkStatus.data, function(idx, obj) {
						tbarray.push(obj.tbId);
					})
					// layer.confirm('确认删除所选中行的数据吗?', function(index) {
					// 	POSTAJAX(VtypeDel, {
					// 		ids: tbarray
					// 	}, function(res) {
					// 		layer.close(index);
					// 		layer.msg(res.msg);
					// 		if (res.status == 200) {
					// 			typetable.reload('teachertable');
					// 		}
					// 	})
					// });
					break;
				default:

					break;
			}
		});

		//监听工具条
		table.on('tool(type_hash)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'look':
					layer.msg(JSON.stringify(obj.data));
					break;
				case 'del':
					delfn({
						ids: [obj.data.tbId]
					}, obj);

					break;
				case 'lookheadimg':
					layer.open({
						type: 1,
						title: false,
						closeBtn: 0,
						// area: '200px',
						skin: 'layui-layer-nobg', //没有背景色
						shadeClose: true,
						content: ' <img src="' + IMG_URL + obj.data.photo + '"  alt="讲师头像"  >'
					});
					// layer.msg("图图图")
					break;
				default:
					break;
			}
		});
		form.render();





		function delfn(tdata, obj) {
			layer.confirm('确认删除该评论吗?', function(index) {
				// 				POSTAJAX(VtypeDel, tdata, function(res) {
				// 					layer.close(index);
				// 					layer.msg(res.msg);
				// 					if (res.status == 200) {
				// 						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
				// 
				// 					}
				// 
				// 				})
			});
		}





	});
</script>

<style scoped>
	.flexcenterlr h1 {

		font-size: 21px;

	}
</style>
